* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

$primary: #236aff;
// $gray: #f6f6f6;
// $white: white;
// $black: black;
// $333: #333333;
// $666: #666666;
// $999: #999999;

$color: (
  primary: #236aff,
  gray: #f6f6f6,
  white: white,
  black: black,
  333: #333333,
  666: #666666,
  999: #999999,
);
@each $key, $val in $color {
  .bg-#{$key} {
    background-color: $val;
  }
  .text-#{$key} {
    color: $val;
  }
}

$text-align: (
  left: left,
  center: center,
  right: right,
);
@each $key in $text-align {
  .text-#{$key} {
    text-align: $key;
  }
}
.text-line-1 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.text-line-2 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.text-line-3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
.flex {
  display: flex;
}
.flex-direction {
  flex-direction: column;
}
.flex-warp {
  flex-wrap: wrap;
}
.flex-nowrap {
  flex-wrap: nowrap;
}
@for $key from 1 to 10 {
  .flex-#{$key} {
    flex: $key;
  }
}
$flex-justify: (
  start: flex-start,
  end: flex-end,
  center: center,
  between: space-between,
  around: space-around,
);
@each $key, $val in $flex-justify {
  .justify-#{$key} {
    justify-content: $val;
  }
}
$flex-align: (
  start: flex-start,
  end: flex-end,
  center: center,
  stretch: stretch // 侧轴等高,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,
);
@each $key, $val in $flex-align {
  .align-#{$key} {
    align-items: $val;
  }
}

@for $key from 0 to 101 {
  .w-#{$key} {
    width: #{$key}#{"%"};
  }
  .h-#{$key} {
    height: #{$key}#{"%"};
  }
  .m-#{$key} {
    margin: $key + px;
  }
  .mx-#{$key} {
    margin-left: $key + px;
    margin-right: $key + px;
  }
  .my-#{$key} {
    margin-top: $key + px;
    margin-bottom: $key + px;
  }
  .ml-#{$key} {
    margin-left: $key + px;
  }
  .mr-#{$key} {
    margin-right: $key + px;
  }
  .mt-#{$key} {
    margin-top: $key + px;
  }
  .mb-#{$key} {
    margin-bottom: $key + px;
  }

  .p-#{$key} {
    padding: $key + px;
  }
  .px-#{$key} {
    padding-left: $key + px;
    padding-right: $key + px;
  }
  .py-#{$key} {
    padding-top: $key + px;
    padding-bottom: $key + px;
  }
  .pl-#{$key} {
    padding-left: $key + px;
  }
  .pr-#{$key} {
    padding-right: $key + px;
  }
  .pt-#{$key} {
    padding-top: $key + px;
  }
  .pb-#{$key} {
    padding-bottom: $key + px;
  }
}

$float-align: (
  left: left,
  right: right,
);
@each $key in $float-align {
  .f#{$key} {
    float: $key;
  }
}
.clear {
  clear: both;
}

$dispaly: (
  inline: inline,
  inline-block: inline-block,
  block: block,
  flex: flex,
);
@each $key, $val in $dispaly {
  .d-#{$key} {
    display: $val;
  }
}
